<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title>添加学生</title>
    <link rel="stylesheet" href="/static/css/pintuer.css">
    <link rel="stylesheet" href="/static/css/admin.css">
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/pintuer.js"></script>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head"><strong><span class="icon-pencil-square-o"></span>添加学生</strong></div>
    <div class="body-content">
        <form id="stu_form" class="form-x" action="">
            <div class="form-group">
                <div class="label">
                    <label>姓名：</label>
                </div>
                <div class="field">
                    <input type="text" class="input" id="name" name="stuname" value="" style="width:30%"/>
                    <div class="tips"></div>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>性别：</label>
                </div>
                <div class="field" id="sex_div" style="padding-top:8px;">
                    男:<input type="radio" class="sex" name="sex" value="男"/>
                    女: <input type="radio" class="sex" name="sex" value="女"/>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>爱好：</label>
                </div>
                <div class="field" style="padding-top:8px;">
                    <input type="text" class="input" id="hobbies" name="hobbies" value="" style="width:30%"/>
                </div>
            </div>


            <div class="form-group">
                <div class="label">
                    <label>出生年月：</label>
                </div>
                <div class="field">
                    <input type="date" class="input" id="birthdate" name="birthdate" value="" style="width:30%"/>
                    <div class="tips"></div>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>手机号：</label>
                </div>
                <div class="field">
                    <input type="text" class="input" id="phone" name="phone" value="" style="width:30%"/>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>所在班级：</label>
                </div>
                <div class="field">
                    <input type="text" class="input" id="cid" name="cid" value="" style="width:30%"/>

                </div>
            </div>


            <div class="form-group">
                <div class="label">
                    <label>描述：</label>
                </div>
                <div class="field">
                    <textarea type="text" class="input" id="s_desc" name="s_desc" style="height:80px;"></textarea>
                </div>
            </div>


            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button id="btn" class="button bg-main icon-check-square-o" type="button"> 提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    /*$(function () {
        onload();
    })*/

    $("#name").blur(function () {
        if ($(this).val() != "") {
            $(this).removeClass("msg-error").addClass("msg-success");
        } else {
            $(this).removeClass("msg-success").addClass("msg-error");
        }
    });



    const genderRadios = $(".sex");
    // 为单选按钮添加失去焦点事件
    genderRadios.on("blur", function () {
        const isChecked = genderRadios.filter(":checked").length > 0;
        if (!isChecked) {
            $("#sex_div").removeClass("msg-succ").addClass("msg-err");
        } else {
            $("#sex_div").removeClass("msg-err").addClass("msg-succ");
        }
    });

    $("#hobbies").blur(function () {
        if ($(this).val() != "") {
            $(this).removeClass("msg-error").addClass("msg-success");
        } else {
            $(this).removeClass("msg-success").addClass("msg-error");
        }
    });

    $("#birthdate").blur(function () {
        if ($(this).val() != "") {
            $(this).removeClass("msg-error").addClass("msg-success");
        } else {
            $(this).removeClass("msg-success").addClass("msg-error");
        }
    });

    $("#phone").blur(function () {
        if ($(this).val() != "") {
            $(this).removeClass("msg-error").addClass("msg-success");
        } else {
            $(this).removeClass("msg-success").addClass("msg-error");
        }
    });

    $("#cid").blur(function () {
        if ($(this).val() == "--请选择--") {
            $(this).removeClass("msg-success").addClass("msg-error");
        } else {
            $(this).removeClass("msg-error").addClass("msg-success");
        }
    });


    /*function onload() {
        $.ajax({
            url: "ShowClassServlet",
            data: "page=" + 1 + "&pageNum=" + 1,
            type: "get",
            dataType: "json",
            success: function (res) {
                let arr = res.data.list;
                var str = '<option>--请选择--</option>';
                for (let i = 1; i < arr.length; i++) {
                    str += `<option>${arr[i].cname}</option>`;
                }
                $("#class_list").html(str);
            }
        })
    }*/

    $("#btn").click(function () {
        if ($("#name").hasClass("msg-success") && $("#sex_div").hasClass("msg-succ") &&
            $("#phone").hasClass("msg-success") && $("#birthdate").hasClass("msg-success") &&
            $("#cid").hasClass("msg-success") && $("#hobbies").hasClass("msg-success")) {
            $.ajax({
                url: '/student/save',
                data: {
                    sname: $("#name").val(),
                    sex: $('input[name="sex"]:checked').val(),
                    hobby: $("#hobbies").val(),
                    birthdate: $("#birthdate").val(),
                    phone: $("#phone").val(),
                    remark: $('#s_desc').val(),
                    cid: $('#cid').val()
                },
                type: "POST",
                dataType: "JSON",
                success: function (data) {
                    console.log('结果', data)
                    /*if (data.code === 1) {
                        alert("学生信息添加成功");
                        location.href = "listStudent.html"
                    } else {
                        alert("添加失败，重新添加");
                    }*/
                }
            })

        }

    });


</script>
</html>
